<template>
    <div class="app-container">
      <!-- 搜索 -->
      <div class="search-div">
        <el-form label-width="70px" size="small">
          <el-row>
            <el-col :span="8">
              <el-form-item label="关 键 字">
                <el-input
                  style="width: 95%"
                  v-model="searchObj.keyword"
                  placeholder="社区名称/投诉员（业主）名称/投诉原因"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="操作时间">
                <el-date-picker
                  v-model="createTimes"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  style="margin-right: 10px; width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="display: flex">
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="fetchData()"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetData"
              >重置</el-button
            >
          </el-row>
        </el-form>
      </div>
  
      <!-- 工具条 -->
      <div class="tools-div">
        <el-button type="success" icon="el-icon-plus" size="mini" @click="add"
          >添 加</el-button
        >
        <el-button
          type="danger"
          class="btn-add"
          size="mini"
          @click="batchRemove()"
          >批量删除</el-button
        >
      </div>
  
      <el-table
        v-loading="listLoading"
        :data="list"
        stripe
        border
        @selection-change="handleSelectionChange"
        style="width: 100%; margin-top: 10px"
      >
        <el-table-column type="selection" />
  
        <el-table-column label="序号" width="70" align="center">
          <template slot-scope="scope">
            {{ (page - 1) * limit + scope.$index + 1 }}
          </template>
        </el-table-column>
  
        <el-table-column prop="communityName" label="所属小区" width="110" />
        <el-table-column prop="ownerName" label="投诉人（业主）" />
        <el-table-column prop="reason" label="投诉缘由" />
        <el-table-column prop="description" label="投诉详情" />
        <el-table-column label="状态" width="80">
          <template slot-scope="scope">
            <!-- 0:待受理 1：已受理  2:处理完毕  -->
            <el-tabs>
              <el-tag v-if="scope.row.status == 0" type="danger">待受理</el-tag>
              <el-tag v-if="scope.row.status == 1" type="warning">已受理</el-tag>
              <el-tag v-if="scope.row.status == 2" type="success"
                >处理完毕</el-tag
              >
            </el-tabs>
          </template>
        </el-table-column>
        <el-table-column label="匿名" width="80">
          <template slot-scope="scope">
            <!-- 0:待受理 1：已受理  2:处理完毕  -->
            <el-tabs>
              <el-tag v-if="scope.row.isAnony == 0" type="danger">不匿名</el-tag>
              <el-tag v-if="scope.row.isAnony == 1" type="warning">匿名</el-tag>
            </el-tabs>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" />
  
        <el-table-column label="操作" align="center" fixed="right">
          <template slot-scope="scope">
            <!-- <el-button type="warning" icon="el-icon-baseball" size="mini" @click="showAssignRole(scope.row)" title="分配角色"/> -->
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="edit(scope.row.id)"
              title="修改"
            />
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="removeDataById(scope.row.id)"
              title="删除"
            />
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <el-pagination
        :current-page="page"
        :total="total"
        :page-size="limit"
        style="padding: 30px 0; text-align: center"
        layout="total, prev, pager, next, jumper"
        @current-change="fetchData"
      />
  
      <el-dialog title="添加/修改" :visible.sync="dialogVisible" width="40%">
        <el-form
          ref="dataForm"
          :model="sysComplaint"
          label-width="100px"
          size="small"
          style="padding-right: 40px"
        >
          <!-- 所属小区 下拉选择 -->
          <el-form-item label="所属小区" prop="communityName">
            <!-- <el-input v-model="sysParking.communityName"/> -->
            <el-select
              v-model="sysComplaint.communityName"
              placeholder="请选择"
              style="width: 100%"
              @change="handleComplaintChange"
            >
            <el-option v-for="item in communityList" 
              :key="item.id"
              :label="item.name"
              :value="item.name"
            >
  
              </el-option>
              <!-- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> -->
            </el-select>
          </el-form-item>
          <el-form-item label="投诉人" prop="ownerName">
            <el-input v-model="sysComplaint.ownerName"  />
          </el-form-item>
          <el-form-item label="投诉缘由" prop="reason">
            <el-input v-model="sysComplaint.reason" />
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-radio-group v-model="sysComplaint.status">
              <el-radio :label="0">待受理</el-radio>
              <el-radio :label="1">已受理</el-radio>
              <el-radio :label="2">处理完毕</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="匿名" prop="isAnony">
            <el-radio-group v-model="sysComplaint.isAnony">
              <el-radio :label="0">不匿名</el-radio>
              <el-radio :label="1">匿名</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="保修描述" prop="description">
            <el-input
              type="textarea"
              :rows="3"
              placeholder="请输入内容"
              v-model="sysComplaint.description"
            >
            </el-input>
          </el-form-item>
        </el-form>
  
        <span slot="footer" class="dialog-footer">
          <el-button
            @click="dialogVisible = false"
            size="small"
            icon="el-icon-refresh-right"
            >取 消</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-check"
            @click="saveOrUpdate()"
            size="small"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import api from "@/api/sysComplaint/complaint";
  
  import communityApi from "@/api/sysCommunity/community"
  export default {
    data() {
      return {
        listLoading: true, // 数据是否正在加载
        list: [], // 数据列表
        total: 0, // 数据库中的总记录数
        page: 1, // 默认页码
        limit: 4, // 每页记录数
        searchObj: {}, // 查询表单对象
        // 处理时间范围条件的
        createTimes: [],
        dialogVisible: false,
        sysComplaint: {},
        saveBtnDisabled: false,
        // 选中的数据【批量删除】
        selectValueData: [],
  
        dialogRoleVisible: false,
        allRoles: [], // 所有角色列表
        userRoleIds: [], // 用户的角色ID的列表
        isIndeterminate: false, // 是否是不确定的
        checkAll: false, // 是否全选
        options: [
          {
            value: "0",
            label: "未受理",
          },
          {
            value: "1",
            label: "已受理",
          },
          {
            value: "2",
            label: "处理完毕",
          },
        ],
  
        communityList:[],//小区列表
      
      };
    },
    created() {
      this.fetchData();
      //小区列表
      this.finAllCommunity();
    },
    methods: {
  
  
      //查询所有小区
      finAllCommunity(){
          communityApi.finAllCommunity().then((res)=>{
            this.communityList=res.data;
  
          })
      },
  
      
      handleComplaintChange(value) {
      // 根据选中的小区名称获取对应的小区ID，并赋值给sysBuild.communityId
      const selectedCommunity = this.communityList.find(item => item.name === value);
      console.log(selectedCommunity);
      if (selectedCommunity) {
        this.sysComplaint.communityId = selectedCommunity.id;
      }
    },
  
      /*
        全选勾选状态发生改变的监听
        */
      handleCheckAllChange(value) {
        // value 当前勾选状态true/false
        // 如果当前全选, userRoleIds就是所有角色id的数组, 否则是空数组
        this.userRoleIds = value ? this.allRoles.map((item) => item.id) : [];
        // 如果当前不是全选也不全不选时, 指定为false
        this.isIndeterminate = false;
      },
  
      // 5、批量删除
      batchRemove() {
        // 判断是否有选中select
        if (this.selectValueData.length == 0) {
          this.$message.warning("请选择要删除的记录！");
          return;
        }
        this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          var ids = [];
          for (var i = 0; i < this.selectValueData.length; i++) {
            var obj = this.selectValueData[i];
            // 获取id值
            var id = obj.id;
            // 将id放进到数组中
            ids.push(id);
          }
          api.batchremoveId(ids).then((response) => {
            // 提示
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            // 刷新页面
            this.fetchData();
          });
        });
      },
  
      handleSelectionChange(selectValue) {
        //  console.log(selectValue);
        this.selectValueData = selectValue;
      },
  
      // 4、根据单个id,删除
      // 删除操作
      removeDataById(id) {
        this.$confirm("此操作将永久删除改记录, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          // a.发送请求
          api.removeById(id).then((res) => {
            // 提示
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            // b.刷新页面
            this.fetchData();
          });
        });
      },
  
      // 修改
      updateComplaint() {
        api.updateComplaint(this.sysComplaint).then((response) => {
          //a.提示语
          this.$message({
            message: "修改成功",
            type: "success",
          });
          //b.关闭弹框
          this.dialogVisible = false;
          //c.刷新数据列表
          this.fetchData();
        });
      },
  
      // 根据id 回显数据
      edit(id) {
        //a.根据id去得到当前用户
        api.findComplaintById(id).then((response) => {
          //b.将数据赋值给
          this.sysComplaint = response.data;
          //c.打开弹框
          this.dialogVisible = true;
        });
      },
  
      // 添加或者修改
      saveOrUpdate() {
        if (this.sysComplaint.id != null) {
          this.updateComplaint();
        } else {
          this.addComplaint();
        }
      },
      // 3、添加
      addComplaint() {
        api.addComplaint(this.sysComplaint).then((response) => {
          //a.提示语
          this.$message({
            message: "添加成功",
            type: "success",
          });
          //b.关闭弹框
          this.dialogVisible = false;
          //c.刷新数据列表
          this.fetchData();
        });
      },
  
      //打开弹框
      add() {
        // 当打开弹框之前，清空文本框所有数据
        this.sysComplaint = {};
        this.dialogVisible = true;
      },
  
      // 2、重置表单
      resetData() {
        // 1.清空条件搜索
        this.searchObj = {};
        //2.清空日期条件
  
        this.createTimes = [];
        //3.刷新数据列表
        this.fetchData();
      },
  
      // 1、分页+查找
      fetchData(page = 1) {
        this.page = page;
        if (this.createTimes && this.createTimes.length == 2) {
          this.searchObj.createTimeBegin = this.createTimes[0];
          this.searchObj.createTimeEnd = this.createTimes[1];
        }
  
        api
          .findPageInfo(this.page, this.limit, this.searchObj)
          .then((response) => {
            //this.list = response.data.list
            this.list = response.data.records;
            this.total = response.data.total;
            // 数据加载并绑定成功
            this.listLoading = false;
          });
      },
    },
  };
  </script>
  
  
  
  <style>
  </style>